<template>
  <div :class="className">
    <a-card
      class="card-item"
      :class="{
        active: active,
        '!h-[264px]': patientStatus == '0'
      }"
      hoverable
      bordered
    >
      <div class="patient-level" :style="{ background: data.hlcolor }">{{ data.dj }}</div>
      <div class="card-content">
        <div class="item-header flex justify-between">
          <a-avatar :src="avatarMan" />
          <div class="flex-1 font-bold ml-2">
            <div class="flex justify-between">
              <div>{{ data.brName || '姓名' }}</div>
              <div>
                {{ data.brXb }} <span class="ml-2">{{ data.brAge }}</span>
              </div>
              <div class="bed-num w-2/5 text-right truncate">{{ data.bedCode || data.lastBedCode || '床位号' }}</div>
            </div>
            <div class="flex justify-between">
              <div>{{ data.admissionCode }}</div>
              <div>{{ data.ksmc }}</div>
            </div>
          </div>
          <!-- <div class="header-icon">
            <img v-if="true" src="@/assets/icons/al-jz.png" mode="scaleToFill" />
            <img v-if="false" src="@/assets/icons/al-sf.png" mode="scaleToFill" />
            <img v-if="false" src="@/assets/icons/no-zj.png" mode="scaleToFill" />
          </div> -->
        </div>
        <div class="mb-1 px-3">
          <LabelValue
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="押金金额"
            :value="formatMoney(data.dpJe)"
          />
          <LabelValue
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="住院费用"
            :value="formatMoney(data.zyfy)"
          />
          <LabelValue
            v-if="patientStatus == '0'"
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="预计住院"
            :value="data.expectDays"
          />

          <LabelValue
            v-if="patientStatus == '2'"
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="预计出院"
            :value="data?.inpDischarge?.dischargeDate"
          />
          <div class="flex justify-between">
            <LabelValue
              v-if="data.admissionTime"
              label-class="text-right w-20 font-semibold mt-2"
              value-class="font-semibold mt-2"
              :width="220"
              label="入院时间"
              :value="data.admissionTime"
            />
            <LabelValue v-else label-class="text-right w-20 font-semibold mt-2" value-class="font-semibold mt-2" :width="220" label="入院时间" value="" />
            <div class="font-semibold mt-2">{{ data.days }}天</div>
          </div>
          <LabelValue
            v-if="patientStatus == '0'"
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="入院诊断"
            :value="data.ryzd"
          />
          <div class="patient-status">
            <div class="flex items-center">
              <a-space>
                <!-- 医疗类别 -->
                <RoundTag v-if="data.inpTypeCode === '21'" bg-color="#ff00dc">普</RoundTag>
                <RoundTag v-if="data.inpTypeCode === '25'" bg-color="#ff00dc">异</RoundTag>
                <RoundTag v-if="data.inpTypeCode === '28'" bg-color="#ff00dc">日</RoundTag>
              </a-space>
              <a-space class="ml-2">
                <!-- 付费方式 -->
                <RoundTag v-if="data.paymentTypeCode === 'YLFFFS001'" bg-color="#3758f1">居</RoundTag>
                <RoundTag v-if="data.paymentTypeCode === 'YLFFFS002'" bg-color="#3758f1">职</RoundTag>
                <RoundTag v-if="data.paymentTypeCode === 'YLFFFS003'" bg-color="#3758f1">自</RoundTag>
              </a-space>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import avatarMan from '@/assets/images/avatar-man.png'
import LabelValue from '@/components/LabelValue'
// import PatientPopover from '@/components/InPatientPopover'
// const emit = defineEmits('change-condition')
defineProps({
  active: {
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  },
  className: {
    type: String,
    default: ''
  },
  patientStatus: {
    type: String,
    default: ''
  }
})
const formatMoney = (value) => {
  if (value === undefined || value === null) {
    return '-'
  } else {
    return '￥' + value + '元'
  }
}
</script>
<style lang="less" scoped>
.card-item {
  width: 300px;
  height: 245px;
  margin: 0 auto;
  &.active {
    border: 1px solid var(--primary-color);
    :deep(.ant-card-body) {
      .item-header {
        color: #ffffff !important;
        background-color: var(--primary-color);
      }
      .bed-num {
        color: #ffffff !important;
      }
    }
  }
  &:hover {
    border: 1px solid var(--primary-color);
  }
  .patient-level {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 24px;
    color: #fff;
    text-align: center;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  :deep(.ant-card-body) {
    height: 100%;
    padding: 0;
    .card-content {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      height: 100%;
      .item-header {
        position: relative;
        display: flex;
        margin-bottom: 8px;
        padding: 8px 16px;
        &::after {
          position: absolute;
          bottom: 0;
          left: 6%;
          width: 88%;
          height: 2px;
          border-bottom: 2px dashed #00000010;
          content: '';
        }
        .header-icon {
          position: absolute;
          top: 20px;
          right: 60px;
          width: 71px;
          height: 41px;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .bed-num {
        color: var(--primary-color);
        font-size: 18px;
      }
    }
  }
  .patient-status {
    position: absolute;
    bottom: 10px;
    left: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
